<template>
	<view>
		<!-- 页面注册板块 -->
		<u-form :model="form" ref="uForm" class="form" :rules="rules">
			<u-form-item label="昵称" prop="username" labelWidth="80" leftIcon="phone">
				<u-input v-model="form.username" class="form-item" placeholder="请输入你的名字" />
			</u-form-item>
			<u-form-item label="用户名" prop="nickName" labelWidth="80" leftIcon="man">
				<u-input v-model="form.nickName" class="form-item" placeholder="请输入你的名字" />
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" labelWidth="100" leftIcon="man-add">
				<u-input v-model="form.phone" class="form-item" placeholder="请输入你的手机号码" />
			</u-form-item>
			<u-form-item label="登录密码" prop="password" labelWidth="100" leftIcon="level">
				<u-input v-model="form.password" class="form-item" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="newpassword" labelWidth="100" leftIcon="photo">
				<u-input v-model="form.newpassword" class="form-item" placeholder="请再次确认密码" />
			</u-form-item>
		</u-form>
		<u-button @click="submit()" class="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					username: '',
					nickName: '',
					password: '',
					newpassword: ''
				},
				rules: {
					// 字段名称
					password: [{
						required: true,
						message: "确认密码不能为空",
						trigger: "blur"
					}],
					newpassword: [{
							required: true,
							message: "确认密码不能为空",
							trigger: "blur"
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value !== this.form.password) {
									callback(new Error('两次输入密码不一致'))
								} else {
									callback()
								}
							}
						}
					],
					username: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写用户名',
							trigger: ['change', 'blur']
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					nickName: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写昵称',
							trigger: ['change', 'blur']
						},
					],
				}

			};
		},
		methods: {
			submit() {
				console.log(this.form)
				let me = this;
				uni.request({
					url: me.serverUrl + `/user/register`, //仅为示例，并非真实接口地址。
					data: this.form,
					method: "POST",
					success: (res) => {
						if (res.data.code == "200") {
							console.log(res.data)
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 2000);



						} else if (res.data.code == "601") {
							uni.showToast({
								title: '用户已存在',
								icon: 'error',
								duration: 2000
							});
						} else if (res.data.code == "400") {
							uni.showToast({
								title: '参数错误',
								icon: 'error',
								duration: 2000
							});
						}
					},


				});
			}

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		}
	}
</script>

<style lang="scss">
	.form {
		width: 95%;
		margin: auto;

		.form-item {
			margin-left: 50rpx;
		}
	}

	.submit {
		width: 95%;
		background: #CC0000;
		border-radius: 52px;
		color: #FFFFFF;

	}
</style>